<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="css/empcss.css"/>
		<link rel="stylesheet" type="text/css" href="css/compatible.css"/>
		<script type="text/javascript">
			var setData = {date_type:"date", date:"today"};
		</script>
		<style>
			#statistics{
				height: 74vh;
				min-height: 550px;
				max-width: 600px;
				margin: 0 auto;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">财务统计</h1>
		</header>
		<div class="mui-content">
		    
		
		<main id="content">
			<section class="mui-content financial-tab text-center" data-url="/api/order/consume_census">
				<ul class="mui-row">
					<li class="mui-col-xs-4" onclick="tab(event, storeChange)"> <!--onclick="tab(event, paytype)"-->
						<p>门店</p>
						<div class="financial-subtab curStore" data-store="">
							<!-- <span data-name="all">全部途径</span>
							<span data-name="普通支付">普通支付</span>
							<span data-name="现金支付">现金支付</span>
							<span data-name="移动支付">移动支付</span>
							<span data-name="微信支付">微信支付</span>
							<span data-name="支付宝支付">支付宝支付</span>
							<span data-name="其它">其它</span> -->
						</div>
					</li>
					<li class="mui-col-xs-4" onclick="tab(event, changeDate)">
						<p>今日</p>
						<div class="financial-subtab">
							<span data-type="date" data-date="today">今天</span>
							<span data-type="date" data-date="yesterday">昨天</span>
							<span data-type="custom" data-date="week">本周</span>
							<span data-type="custom" data-date="month">本月</span>
							<span class="none" onclick="timeStep(event)">时间段</span>
						</div>
					</li>
					<li class="mui-col-xs-4" onclick="tab(event, paytype2)"> <!--onclick="tab(event, paytype)"-->
						<p>全部途径</p>
						<div class="financial-subtab">
							<span data-name="all">全部途径</span>
							<span data-name="product">收银单据</span>
							<span data-name="recharge">充值单据</span>
							<!-- <span data-name="移动支付">移动支付</span>
							<span data-name="微信支付">微信支付</span>
							<span data-name="支付宝支付">支付宝支付</span>
							<span data-name="其它">其它</span> -->
						</div>
					</li>
				</ul>
			</section>
			<div id="statistics"></div>
		<div class="total-data container">
			<div class="total-data-row clear">
				<div class="pull-left">走势分析</div>
				<div class="pull-right">实收<span id="real_money_all"></span>元</div>
			</div>
			<div class="total-data-row clear">
				<div class="pull-right">会员卡扣款：<span id="use_balance_all">0</span>元</div>
			</div>
			<div class="total-data-row clear">
				
				<div class="pull-right">共计<span id="sell_money_all">0</span>元</div>
			</div>
		</div>

		<div id="trend" class="" style="height: 300px"></div>
		<section class="table container text-center profit-table table-col-4 "></section>
		
		<div id="popover" class="mui-popover">
			<div class="listdiv">
				<div class="mui-input-row borbot" >
					<label>开始时间:</label>
					<div class="place items">
						<button id='starttime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
					</div>
				</div> 
				<div class="mui-input-row borbot" >
					<label>结束时间:</label>
					<div class="place items">
						<button id='endtime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
					</div>
				</div>
				<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			</div>
		</div>
		</main>
		</div>
	</body>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/mui.min.js"></script>
<script src="js/echarts.js"></script>
<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>


<script src="js/commont.js"></script>

	<script type="text/javascript">
		
	var statistics = document.getElementById("statistics");
	var myChart = echarts.init(statistics);

	var trend = document.getElementById("trend");
	var myChart2 = echarts.init(trend);


	/* 环形图表 */
	function fn1(_data) {
		var color = ['#E7129F', '#25ADC4', '#7042B9', '#4F94CD', '#436EEE', '#36648B'];

		var data = [] // 数据标题
		var value = [] // 数据值
		var data_array = []
		var subtext = 0;
		
		
		if (_data.length > 0) {
			var allMoney = 0;
			_data.forEach(function (cur, index, array){
				
				//if(cur['order_product'].length > 0){
					var money = cur['pay_money']
				//}else{
					//var money = 0;
				//}
				data.push(cur['name'])

				allMoney += parseFloat(money)

				value.push(money)

				var _json = {};

				subtext += parseFloat(money);

				_json.value = money
				_json.name = cur['name']
				_json.itemStyle = {
					color: color[index]
				},

				data_array.push(_json)


			})
		}
		
		subtext = subtext.toString()

		//$('.zsgj').html(subtext)



		var width = parseInt((document.body.clientWidth - 50) / 3);

		var statistics_data = {
			title: {
				text: '合计(元)',
				left: 'center',
				top: '30%',
				textStyle: {
					color: '#333',
					fontSize: 13
				},
				subtext: subtext,
				subtextStyle: {
					color: '#000',
					fontSize: 22
				}
			},
			tooltip: {
				trigger: 'item',
				formatter: "{b}: {c} ({d}%)"
			},
			legend: {
				orient: 'vertical',
				width: '100%',
				bottom: 0,
				left: 0,
				itemHeight: 16,
				itemWidth: 18,
				data: data,
				formatter: function(name) {
					var total = 0;
					var index = data.indexOf(name)
					var target = value[index];

					for (var i = 0, l = data.length; i < l; i++) {
						total += parseFloat(value[i]);
					}
					console.log(total, target)
					var a = 0;
					if (total != 0) {
						a = (target / total) * 100
					}

					var arr = [
					'{a|' + name + '}',
					'{b|占比' + (a).toFixed(2) + '%}',
					'{c|￥' + target + '}',
					]
					return arr.join('')
				},
				textStyle: {
					rich: {
						a: {
							fontSize: 13,
							verticalAlign: 'center',
							align: 'left',
							width: width,
							lineHeight: 20
						},
						b: {
							fontSize: 13,
							width: width,
							verticalAlign: 'center',
							align: 'center',
							lineHeight: 20
						},
						c: {
							fontSize: 13,
							width: width,
							verticalAlign: 'center',
							align: 'right',
							lineHeight: 20
						}
					}
				}
			},
			series: [{
				name: '财务统计',
				type: 'pie',
				radius: ['50%', '70%'],
				center: ['50%', '35%'],
				avoidLabelOverlap: false,
				label: {
					normal: {
						show: false,
						position: 'center'
					},
					emphasis: {
						show: false,
						textStyle: {
							fontSize: '30',
							fontWeight: 'bold'
						}
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: data_array
			}]
		};

		return statistics_data;
	}

	/* 环形图表 END */
	/* 走势图表 */
	
	function fn2(_data) {
		
		var data_day = []
		var data_q = []
		
		if(_data.length > 0){
			_data.forEach((cur, index, array) => {
				data_day.push(cur['time'].substr(5))
				data_q.push(cur['order_money'])
			})
		}
		
		var trend_data = {
			tooltip: {
				trigger: 'axis',
				formatter: "{b} <br/> 金额: {c}"
			},
			xAxis: {
				type: 'category',
				data: data_day,
				nameGap: 20,
				axisLine: {
					lineStyle: {
						color: '#5799B7'
					}
				}
			},
			yAxis: {
				type: 'value',
				name: '利润',
				axisLine: {
					lineStyle: {
						color: '#5799B7'
					}
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				offset : -5,
				axisLabel : {
					fontSize : 10
				}
			},
			lineStyle: {
				color: '#5799B7'
			},
			itemStyle: {
				color: '#5799B7'
			},
			series: [{
				data: data_q,
				type: 'line',
				symbol: 'circle',
				
			}]
		};

		if(_data.length > 8){
			trend_data['dataZoom'] = [{
				type: 'inside',
				show: true, //flase直接隐藏图形
				xAxisIndex: [0],
				left: '9%', //滚动条靠左侧的百分比
				bottom: -5,
				start: 0,//滚动条的起始位置
				end: 60 ,//滚动条的截止位置（按比例分割你的柱状图x轴长度）
			}]
		}

		return trend_data;
	}

	/* 走势图表 END */

	setEcharts(myChart, {}, fn1)
	setEcharts(myChart2, {}, fn2)

	/* 支付途径方法 */
	function paytype(_data){
		
		var array = ['现金支付', '微信支付', '支付宝支付', '银行卡记账',  '其它']
		var name = _data.name
		var money = _data.money
		
		var option = myChart.getOption();
		//console.log(option)
		option.title[0].subtext = money
		myChart.setOption(option)
		
		array.forEach(function (cur, index){
			var o = {
				name : cur
			}
			
			if(cur == name){
				o.type = 'legendSelect'
			}else{
				o.type = 'legendUnSelect'
			}
			
			if(name == 'all') o.type = 'legendSelect'

				myChart.dispatchAction(o)
		})
	}

	function paytype2(_data){
		setData['census_type'] = _data.name
		changeDate(setData, true)
	}
	
	function requireData(_data){
		var store = $('.curStore').data('store');
		if(!!store){
			_data['data']['store_id'] = store
		}else{
			delete _data['data']['store_id']
		}
		_data['data'].access_token = acctoken()

		if(_data.data['date_type'] == 'date'){
			$('.singleday').hide()
		}else{
			$('.singleday').show()
		}


		ajax(_data, function (res){
			var data = res.data
			
			setEcharts(myChart, data['pay_sort'], fn1)
			setEcharts(myChart2, data['consume_money'], fn2)

			var html = []
			html.push(`<div class="table-th">
				<span class="table-td">日期</span>
				<span class="table-td">订单金额</span>
				<span class="table-td">优惠金额</span>
				<span class="table-td">实收金额</span>
				</div>`)
				
			data['consume_money'].forEach(function(cur, index, array){
				var tpl =
				`<div class="table-tr"><span class="table-td">${cur['time'].substr(5)}</span><span class="table-td">${cur['order_money']}</span><span class="table-td">${cur['reduce_money']}</span><span class="table-td">${cur['fact_money']}</span></div>`;
				html.push(tpl)
			})
			
			html.push(`<div class="table-th">
				<span class="table-td"><b>合计</b></span>
				<span class="table-td"><b>${data['order_money_all']}</b></span>
				<span class="table-td"><b>${data['reduce_money_all']}</b></span>
				<span class="table-td"><b>${data['fact_money_all']}</b></span>
				</div>`)

			$('.table').html(html.join(''));
			$('#use_balance_all').text(data.use_balance_all);
			$('#sell_money_all').text(data.sell_money_all) 
			$('#real_money_all').text(data.real_money_all)
		})
	}


	$(function (){
		requireData({
			url: '/api/order/consume_census',
			data: {
				date_type : 'date',
				date : 'today'
			}
		});

	})

	// 手动触发图表大小
	window.addEventListener("resize", function (){
		myChart.resize();
		myChart2.resize();
	});
	</script>
</html>
